<script setup>
import { defineProps,onMounted } from 'vue';
defineProps(['goods'])
</script>
<template>
    <ul>
        <li v-for="item in goods">
            <el-card shadow="hover">
              <router-link :to="`/product/${item.id}`">
                <img :src="item.picture">
              </router-link>
              <p>{{ item.name }}</p>
              <span>￥{{ item.price }}</span>
            </el-card>
        </li>
     </ul>
</template>
<style scoped lang="less">
ul {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-wrap:wrap;
  align-content:center;
}
ul li{
  width:22%;
  margin:15px;
}
ul li p{
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
ul li span{
  color:red;
}
img{
  width: 100%;
}
</style>